<template>
  <div id="store">

    <div id="shop">
      <div>
        <p>商铺信息</p>
      </div>

      <div id="fore">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="店铺名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <div id="area">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="店铺地址">
                <el-select v-model="form.region" placeholder="选择省市">
                  <el-option label="北京市" value="北京市"></el-option>
                  <el-option label="上海市" value="上海市"></el-option>
                  <el-option label="天津市" value="天津市"></el-option>
                  <el-option label="重庆市" value="重庆市"></el-option>
                  <el-option label="四川省" value="四川省"></el-option>
                  <el-option label="甘肃省" value="甘肃省"></el-option>
                  <el-option label="广东省" value="广东省"></el-option>
                  <el-option label="广西省" value="广西省"></el-option>
                  <el-option label="湖北省" value="湖北省"></el-option>
                  <el-option label="湖南省" value="湖南省"></el-option>
                  <el-option label="浙江省" value="浙江省"></el-option>
                  <el-option label="江苏省" value="江苏省"></el-option>

                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.county" placeholder="选择区县">
                  <el-option label="东城区" value="东城区"></el-option>
                  <el-option label="昌平区" value="昌平区"></el-option>
                  <el-option label="黄浦区" value="黄浦区"></el-option>
                  <el-option label="徐家汇" value="徐家汇"></el-option>
                  <el-option label="河东区" value="河东区"></el-option>
                  <el-option label="渝中区" value="渝中区"></el-option>
                  <el-option label="巴南汇" value="巴南汇"></el-option>
                  <el-option label="河东区" value="河东区"></el-option>
                  <el-option label="天府新区" value="天府新区"></el-option>
                  <el-option label="武侯区" value="武侯区"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <el-form-item>
            <el-input v-model="form.address" placeholder="详细地址"></el-input>
          </el-form-item>
          <el-form-item label="营业时间">
            <el-col>
              <el-date-picker type="date" placeholder="选择日期" style="width: 25%;" v-model="form.date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="营业状态" class="clear">
            <el-switch style="display: block" v-model="value" active-color="#ff4949" inactive-color="#13ce66" @change="btnchange">
            </el-switch>
            <span id="stu">{{status}}</span>
          </el-form-item>

          <el-form-item label="店铺图像">
            <!-- <el-input v-model="form.src"></el-input> -->

            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :show-file-list="true">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

          </el-form-item>
          <el-form-item label="店铺介绍">
            <el-input type="textarea" v-model="form.desc" style="width: 80%" :rows="10"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" round style="width:80px;margin-right:20px">确定</el-button>
            <el-button round style="width:80px" type="info">取消</el-button>
          </el-form-item>

        </el-form>
      </div>

    </div>

  </div>
</template>


<script>
export default {
  data() {
    return {
      status: '营业中',
      value: false,
      dialogImageUrl: '',
      dialogVisible: false,
      delivery: false,

      form: {
        name: '',
        region: '',
        date: '',
        src: '',
        desc: '',
        county: '',
        address: '',
      }
    }
  },

  methods: {
    onSubmit() {
      this.$axios({
        url: '/store/getshop',
        method: 'post',
        data: {
          name: this.form.name,
          region: this.form.region,
          county: this.form.county,
          address: this.form.address,
          data: this.form.date,
          desc: this.form.desc,
          src: this.form.src,
          status: this.status
        }

      }).then((res) => {
        console.log(res.data.code);
        if (res.data.code == 200) {

          this.$message({
            showClose: true,
            message: '恭喜你，店铺信息添加成功！',
            type: 'success',
            duration: 2000,
          })
          this.form = {}

        } else {
          this.$message({
            showClose: true,
            message: '很遗憾，店铺信息添加失败！',
            type: 'warning',
            duration: 2000,
          })
        }
      })
    },

    handleRemove(file, fileList) {
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    btnchange(state) {
      if (state == true) {
        this.status = "未营业"
      } else {
        this.status = "营业中"
      }
    }
  },
}
</script>

<style scoped>
#shop {
  margin: 20px 0;
  height: 700px;
  border: 1px solid rgb(220, 220, 220);
  overflow-y: scroll;
}
#shop p {
  margin-left: 30px;
}
#shop > div:nth-child(1) {
  background-color: rgb(242, 242, 242);
  border-bottom: 1px solid rgb(220, 220, 220);
  height: 60px;
  line-height: 60px;
}
#fore {
  width: 700px;
  margin: 40px auto;
}
#area {
  margin-left: 12px;
}
.el-input {
  width: 50%;
}
.el-select {
  width: 80%;
}
#ye {
  display: inline-block;
  margin-left: 20px;
}
.el-switch {
  line-height: 40px;
}

#stu {
  float: left;
}
.clear::after {
  content: "";
  display: block;
  clear: both;
}
</style>

<style lang="less">
#store {
  .el-switch {
    float: left;
    margin-right: 20px;
  }
}
</style>